<template>
  <div class="about">
    <div class="top">
      <span @click="add()">添加笔记</span>
      <span @click="back()">取消</span>
    </div>
    <div class="centen">
      <input type="text" class="title" v-model="data.title" /><span>{{
        data.title
      }}</span>
    </div>
    <div class="but">
      <textarea class="msg"  v-model="data.msg"></textarea
      >
      <span class="s" v-html="data.msg"></span>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive } from "vue";
import { useStore } from "vuex";
export default {
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      title: '',
      msg: '',
    });
    function add() {
      store.commit("ads", {
        title: data.title,
        msg: data.msg,
      });
      router.push({ path: "/" });
    }
    function back() {
      router.back();
    }
    return {
      data,
      add,
      back,
    };
  },
};
</script> 

<style scoped>
* {
  margin: 0;
  padding: 0;
  background-color: #dcdcdc;
}
.top span {
  padding: 5px;
  border: 1px solid #000;
  background-color: #fff;
}
.centen {
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bolder;
}
.title {
  width: 700px;
  height: 50px;
  outline: none;
  background-color: #fff;
}
.but {
  position: relative;
}
.msg {
  width: 700px;
  height: 600px;
  outline: none;
  resize: none;
  background-color: #fff;
}
.s {
  position: absolute;
  left: 710px;
  top: 0;
}
</style>
